<template>
  <div>
<!--    <div>当前最新的count为: {{count}}</div>-->
    <h3>{{showNUM}}</h3>
    <br>
    <button @click="btnHandler1">-1</button>
    <br>
    <button @click="btnHandler2">-N</button>
    <br>
    <button @click="btnHandler3">延迟-1</button>
    <br>
    <button @click="btnHandler4(5)">延迟-N</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Subtraction',
  data () {
    return {

    }
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNUM'])
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync']),
    btnHandler1 () {
      this.sub()
    },
    btnHandler2 () {
      this.subN(3)
    },
    btnHandler3 () {
      this.subAsync()
    },
    btnHandler4 (step) {
      this.subNAsync(step)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
